<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">报事报修</block>
			</cu-custom>
			<view class="cu-bar bg-white solid-bottom margin-top animation-scale-down"
				:style="[{animation: 'show 0.5s 1'}]">
				<view class="action">
					<text class="cuIcon-title text-orange"></text> 我的报事报修
				</view>
			</view>
			<view class="cu-list menu animation-scale-down" :style="[{animation: 'show 0.5s 1'}]">
				<view class="cu-item " :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in repairList" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index" >
					<view class="content padding-tb-sm" @click="openDetail(item)">
						<view>
							<text class="text-blue margin-right-xs"
								:class="item.type===1?'cuIcon-repairfill':'cuIcon-paintfill'"></text>{{item.title | isEmpty}}
						</view>
						<view class="text-gray text-sm">
							<text
								class="cuIcon-time margin-right-xs"></text>{{item.createTime | timeFormat('yyyy-mm-dd')}}
						</view>
					</view>
					<view class="action" @click="openDetail(item)">
						<view class="cu-tag light" :class="(item.state===0)?'bg-orange':'bg-green'">
							{{(item.state===0)?'等待处理':'已处理'}}
						</view>
					</view>
					<view class="move">
						<view class="bg-red" @click="repairDelete(item.id)">删除</view>
					</view>
				</view>
				<!-- <view class="cu-item" v-for="(item,index) in repairList" :key="index" @click="openDetail(item)">
					<view class="content padding-tb-sm">
						<view>
							<text class="text-blue margin-right-xs"
								:class="item.type===1?'cuIcon-repairfill':'cuIcon-paintfill'"></text>{{item.title | isEmpty}}
						</view>
						<view class="text-gray text-sm">
							<text
								class="cuIcon-time margin-right-xs"></text>{{item.createTime | timeFormat('yyyy-mm-dd')}}
						</view>
					</view>
					<view class="action">
						<view class="cu-tag light" :class="(item.state===0)?'bg-orange':'bg-green'">
							{{(item.state===0)?'等待处理':'已处理'}}</view>
					</view>
				</view> -->
			</view>
		</scroll-view>
		<view class="cu-modal" :class="showModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content text-bold">报修详情</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="cu-list menu text-left">
					<view class="cu-item">
						<view class="content text-bold">标题</view>
						<view class="action">
							{{thisRepair.title}}
						</view>
					</view>
					<view class="cu-item">
						<view class="content text-bold">时间</view>
						<view class="action">
							{{thisRepair.createTime}}
						</view>
					</view>
					<view class="cu-item">
						<view class="content text-bold">类型</view>
						<view class="action">
							{{thisRepair.type}}
						</view>
					</view>
					<view class="cu-item">
						<view class="content text-bold">内容</view>
					</view>
					<view class="cu-item">
						<view class="content">{{thisRepair.content}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-fab class="animation-scale-up" ref="fab" :pattern="pattern" horizontal="right" vertical="bottom"
			:popMenu="false" @fabClick="fabClick" :style="[{animation: 'show 0.5s 1'}]" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
				},
				thisRepair: {},
				repairList: [],
				showModal: false,
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		created() {
			this.lodeList();
		},
		methods: {
			lodeList() {
				this.$http.get('/property/znzfRepairment/list', {
					params: {
						submiter: this.$store.getters.userid
					}
				}).then((res) => {
					console.log(res.data.result.records);
					this.repairList = res.data.result.records;
				})
			},
			openDetail(item) {
				this.thisRepair = item;
				console.log(this.thisRepair)
				this.showModal = true;
			},
			repairDelete(param) {
				this.$http.delete(`/property/znzfRepairment/delete?id=${param}`).then((res) => {
					if (res.data.success) {
						this.$tip.success('删除成功!')
						this.lodeList();
					} else {
						this.$tip.alert('删除失败' + res.errMsg);
					}
				})
			},
			hideModal() {
				this.showModal = false;
			},
			fabClick() {
				this.$Router.push({
					name: 'repairReport'
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style lang='scss'>
	.page {
		height: 100Vh;
		width: 100vw;
	}
</style>
